<template>
	<view class="page">
		<!-- <u-navbar :isBack="true" title=" " title-color="#101010" 
		:background="{background: '#fff'}" :borderBottom="false"></u-navbar> -->
		
		<image src="@/static/login/tuichu.png" mode="widthFix" style="width: 40rpx;position: absolute;top: 88rpx;left: 32rpx;"
		@click="outGo" v-if="state == 1"></image>
		<image src="@/static/login/jian.png" mode="widthFix" style="width: 40rpx;position: absolute;top: 88rpx;left: 32rpx;"
		@click="reduceGo" v-else></image>
	
		<view style="text-align: center;margin-top: 220rpx;">
			<view style="font-size: 38rpx;font-weight: bold;">众享助派</view>
		</view>
		<view style="padding: 0rpx 64rpx;margin-top: 100rpx;" v-if="state == 1">
			
			
			<view style="border-bottom: #EFEFEF 2rpx solid;margin-top: 72rpx;padding: 32rpx 0;">
				<input type="text" placeholder="请输入手机号" v-model="registerData.account" maxlength="11" />
			</view>
			
			<view style="border-bottom: #EFEFEF 2rpx solid;margin-top: 32rpx;padding: 32rpx 0;">
				<input type="text" placeholder="请输入登录密码" v-model="registerData.password" />
			</view>
			
			<view style="margin-top: 100rpx;padding: 28rpx;text-align: center;
			background: linear-gradient(to right, #3283FD, #50A5F4);
			box-shadow: 0px 4px 8px rgba(80, 165, 244, 0.3);
			font-size: 32rpx;color: #fff;border-radius: 50rpx;" @click="getLogin">
				<text>登 录</text>
			</view>
			
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="margin-top: 16rpx;color: #ccc;">
					<text style="color: #ff9900;" @click="touristForgotpwd">忘记密码？</text>
				</view>
				<view style="margin-top: 16rpx;color: #ccc;" @click="touristLogin" v-if="pid > 0">
					没有账号，<text style="color: #3283FD;">点击注册</text>
				</view>
			</view>
			
		</view>
		<view style="padding: 0rpx 64rpx;margin-top: 100rpx;" v-else>
			<view style="border-bottom: #EFEFEF 2rpx solid;margin-top: 72rpx;padding: 32rpx 0;">
				<input type="text" placeholder="请输入手机号" v-model="registerData.mobile" />
			</view>
			
			<view style="border-bottom: #EFEFEF 2rpx solid;margin-top: 32rpx;padding: 32rpx 0;">
				<input type="text" placeholder="请设置登录密码" v-model="registerData.password" />
			</view>
			
			<view style="border-bottom: #EFEFEF 2rpx solid;margin-top: 32rpx;padding: 32rpx 0;">
				<input type="text" placeholder="请再次输入登录密码" v-model="registerData.twopassword" />
			</view>
			
			<!-- <view style="border-bottom: #EFEFEF 2rpx solid;margin-top: 32rpx;padding: 32rpx 0;display: flex;align-items: center;">
				<input type="text" placeholder="请输入验证码" style="flex: 1;"/>
				<view style="color: #257CF6;font-size: 28rpx;">
					获取验证码
				</view>
			</view> -->
			
			<view class="login-title-info" @click="agreementBtn" style="margin-top: 24rpx;">
				<checkbox-group>
					<label>
						<checkbox value="cb" color="#50A5F4" style="transform:scale(0.7)" />
						我已阅读并同意
						<text @click="gotoRegistration('user')" style="color:#3D7EFF">《用户协议》</text>
					</label>
				</checkbox-group>
			</view>
			
			<view style="margin-top: 100rpx;padding: 28rpx;text-align: center;
			background: linear-gradient(to right, #3283FD, #50A5F4);
			box-shadow: 0px 4px 8px rgba(80, 165, 244, 0.3);
			font-size: 32rpx;color: #fff;border-radius: 50rpx;" @click="getRegister">
				<text>注册登录</text>
			</view>
		</view>
		
		<view style="position: fixed;bottom: 0;width: 100%;">
			<image src="@/static/login/botbg.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		
		<view class="" style="text-align: center;margin-top: 120rpx;">
			<view style="display: flex;align-items: center;justify-content: center;">
				<view style="width: 120rpx;height: 1rpx;background: #50A5F4;"></view>
				<view style="margin: 0 20rpx;">其他登录方式</view>
				<view style="width: 120rpx;height: 1rpx;background: #50A5F4;"></view>
			</view>
			<view style="margin-top: 40rpx;" @click="weixinLogin">
				<image src="/static/my/weixin.png" mode="widthFix" style="width: 80rpx;height: 80rpx;"></image>
			</view>
		</view>
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import configApi from 'utils/config.js'
	import {request} from 'utils/request.js'
	import Vue from 'vue'
	import config from '../../utils/config';
	var moment = require('moment');
	export default {
		data() {
			return {
				state:1,
				registerData: {
					'account': '',
					'password': '',
					'twopassword': ''
				},
				pid: 0,
				
				agreementFlag: false, //注册协议选中状态
			}
		},
		onLoad(options) {
			if(options.user_id){
				uni.setStorageSync('pid', options.user_id);
				this.pid = options.user_id;
			}
			
			let _this = this;
			console.log('options', options);
			if (options.scene) {
				console.log('APP onLoad 这是微信扫码进入')
				let scene = decodeURIComponent(options.scene);
				console.log('scene: ', scene)
				let params = scene.split(','),
					data = {};
				for (let i in params) {
					var val = params[i].split(':');
					val.length > 0 && val[0] && (data[val[0]] = val[1] || null)
				}
				console.log('data: ', data)
				uni.setStorageSync('pid', data.user_id);
				this.pid = data.user_id;
				// this.card_id = data.user_id;
				// this.share_id = data.share_id;
				// _this.getCardData();
			}
			
			let userToken = uni.getStorageSync('userToken');
			// if(userToken){
			// 	uni.switchTab({
			// 		url: '/pages/menu/home'
			// 	})
			// }
		},
		methods: {
			//选中注册协议按钮
			agreementBtn() {
				this.agreementFlag = !this.agreementFlag;
			},
			getLogin(){
				// uni.switchTab({
				// 	url: '/pages/menu/home'
				// })
				// return;
				// if (!this.agreementFlag) {
				// 	uni.showToast({
				// 		title: "请先阅读并勾选用户协议",
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				let that = this;
				request.post({
					url: '/user/login',
					data: this.registerData
				}).then(res=>{
					console.log(res);
					if(res.code == 1){
						let userinfo = res.data.userinfo;
						uni.setStorageSync('userToken', userinfo.token);
						uni.switchTab({
							url: '/pages/menu/home'
						})
					}else{
						this.$refs.uToast.show({ title: res.msg });
					}
				})
			},
			// 忘记密码
			touristForgotpwd(){
				uni.navigateTo({
					url: '/pages/login/forgotpwd'
				})
			},
			weixinLogin(){
				
				let param = {},_this = this;
				param.type = 'Wechat';
				
				let user_info = {};
				user_info.gender = 0;
				user_info.nickName = '微信用户';
				user_info.avatarUrl = configApi.appurlImg + '/appimg/avatar.png';
				param.user_info = user_info;
				
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function (loginRes) {
						param.code = loginRes.code;
						console.log(loginRes.code);
						request.post({
							url: '/user/third',
							data: param
						}).then(res =>{
							console.log(res);
							uni.setStorageSync('userToken', res.data.token);
							setTimeout(() => {
								uni.navigateBack();
								uni.$emit('htmlRefresh', {});
							}, 600);
						})
					}
				});
			},
			// 游客登录
			touristLogin(){
				uni.navigateTo({
					url: '/pages/my/realname'
				})
				return;
				const resdeviceId = uni.getDeviceInfo();
				// console.log('res: ', resdeviceId)
				let that = this;
				request.post({
					url: '/user/touristLogin',
					data: {
						deviceId: resdeviceId.deviceId
					}
				}).then(res=>{
					console.log(res);
					if(res.code == 1){
						let userinfo = res.data.userinfo;
						uni.setStorageSync('userToken', userinfo.token);
						setTimeout(() => {
							uni.navigateBack();
							uni.$emit('htmlRefresh', {
								type: 1
							});
						}, 300);
						// that.$u.vuex('logoUrl', iniData.logo);
						// that.$u.vuex('miniProgramName', iniData.name);
					}
				})
			},
			outGo(){
				uni.navigateBack();
				// 调用父级
				// setTimeout(() => {
				// 	uni.navigateBack();
				// 	uni.$emit('refreshLogin', {
				// 		type: _this.phtml
				// 	});
				// }, 300);
			},
			reduceGo(){
				this.state = 1;
			}
		},
	}
</script>

<style>
	page{
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.top-box{
		background-size: 100% 100%;
		position: relative;
	}
	
	.login-bottom {
		margin-top: 76rpx;
		width: 100%;
		text-align: center;
		margin-bottom: 60rpx;
	
		.login-title-info {
			text-align: center;
			text {
				color: #009688;
			}
		}
	}
</style>
